<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>装饰器模式（函数增强）</title>
  </head>
  <body>
    <script>
      //前置增强函数
      Function.prototype.before = function (beforeFunction) {
        // 记录原函数
        const originalFunction = this;
        // 返回增强后的函数
        return function () {
          // 运行前置增强函数
          beforeFunction(...arguments);
          // 运行原函数，并返回原函数运行的结果
          return originalFunction(...arguments);
        };
      };

      // 后置增强函数
      Function.prototype.after = function (afterFucntion) {
        // 记录原函数
        const originalFunction = this;
        // 返回增强后的函数
        return function () {
          // 运行原函数，并记录原函数运行的结果
          const res = originalFunction(...arguments);
          // 运行后置增强函数
          afterFucntion(...arguments);
          // 返回原函数运行的结果
          return res;
        };
      };

      function sing(...words) {
        console.log(`start to sing: ${words} ~~~`);
      }

      const enhancedSing = sing
        .before((...words) => {
          console.log(`Before function invoking and say ${words}!`);
        })
        .after((...words) => {
          console.log(`After function invoking and baba ${words}..`);
        });

      enhancedSing("啦啦啦，你是黑猫警长！", "巴巴变");
    </script>
  </body>
</html>
